<template>
  <div style="display: flex;flex-direction: column;flex: 1;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px; margin-left:200px">
      <legend>账户资料</legend>
    </fieldset>
    <form class="layui-form" lay-filter="dataFrm" id="dataFrm" style="width: 600px; height: 500px;margin: 20px auto">

      <div class="layui-form-item">
        <label class="layui-form-label">责任人</label>
        <div class="layui-input-block">
          <input type="hidden" v-model="data.userInfo.userid" name="userid">
          <input type="text" v-model="data.userInfo.realname" name="realname" placeholder="请输姓名" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">身份证</label>
        <div class="layui-input-block">
          <input type="text" v-model="data.userInfo.identitys" name="identitys" lay-verify="title" autocomplete="off"
            placeholder="请输入身份证" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-block">
          <input type="text" v-model="data.userInfo.address" name="address" lay-verify="title" autocomplete="off"
            placeholder="请输入地址" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">联系方式</label>
        <div class="layui-input-block">
          <input type="text" v-model="data.userInfo.phone" name="phone" lay-verify="title" autocomplete="off"
            placeholder="请输入联系方式" class="layui-input">
        </div>
      </div>
      <!--    <div  th:if="${user.getSex()==1}">-->
      <!--        <div class="layui-form-item">-->
      <!--            <label class="layui-form-label">性别</label>-->
      <!--            <div class="layui-input-block">-->
      <!--                <input type="radio" name="sex" value="1" title="男" checked="checked">-->
      <!--                <input type="radio" name="sex" value="0" title="女">-->
      <!--            </div>-->
      <!--        </div>-->
      <!--    </div>-->
      <!--    <div  th:if="${user.getSex()==0}">-->
      <!--        <div class="layui-form-item">-->
      <!--            <div class="layui-input-block">-->
      <!--                <input type="radio" name="sex" value="1" title="男">-->
      <!--                <input type="radio" name="sex" value="0" title="女" checked="checked">-->
      <!--            </div>-->
      <!--        </div>-->
      <!--    </div>-->
      <div class="layui-upload">
        <label class="layui-form-label">首页LOGO</label>
        <button type="button" class="layui-btn" id="test1">上传图片</button>
        <label style="color:#e94141;">　　<i class="layui-icon layui-icon-tips"></i> 请上传360*140像素的图片 </label>
        <div class="layui-upload-list" style="text-align: center;">
          <img class="layui-upload-img" id="demo1" :src="imgBaseUrl + imgSrc" width="360" height="140">
          <p id="demoText"></p>
        </div>

      </div>
      <input type="hidden" name="images" class="image">

      <div class="layui-form-item" style="text-align: center;">
        <div class="layui-input-block">
          <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release"
            lay-filter="doSubmit" lay-submit="">保存
          </button>
          <button type="button" id="pwd" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">
            修改密码
          </button>
        </div>
      </div>
      <!-- 修改的弹出层开始 -->
      <div style="display: none;padding: 20px" id="saveOrUpdateDiv">
        <form class="layui-form" lay-filter="dataFrm" id="dataPwd">
          <div class="layui-form-item">
            <label class="layui-form-label">输入旧密码</label>
            <div class="layui-input-block">
              <input type="hidden" id="loginname" v-model="data.userInfo.loginname" name="loginname" />
              <input type="password" id="jpwd" name="pwd" lay-verify="title" autocomplete="off" placeholder="请输入旧密码"
                class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">输入新密码</label>
            <div class="layui-input-block">
              <input type="password" id="pwd1" v-model="data.userInfo.pwd1" name="pwd1" lay-verify="title"
                autocomplete="off" placeholder="请输入新密码" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
              <input type="password" id="pwd2" v-model="data.userInfo.pwd2" name="pwd2" lay-verify="title"
                autocomplete="off" placeholder="确认密码" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item" style="text-align: center; margin-left: 0">
            <div class="layui-input-block">
              <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release"
                id="qwe">保存
              </button>
              <button type="button" id="guanbi"
                class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-close">取消修改
              </button>
            </div>
          </div>
        </form>
      </div>
      <!-- 修改的弹出层结束 -->
    </form>
  </div>
</template>

<script setup>
const env = import.meta.env
//console.log(env.MODE)
let imgBaseUrl = ref('');
if (env.MODE == 'development') {
  imgBaseUrl.value = 'http://localhost:33333'
}
const { appContext: { config: { globalProperties } } } = getCurrentInstance()
let $httpUrl = globalProperties.$httpUrl;

let data = reactive({
  userInfo: {},
  queryForm: {
    pageNum: 1,
    pageSize: 20
  },
  tableData: [

  ],
  total: 0,
  dialog: false,
  form: {},
  rules: {
    name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
    role: [{ required: true, message: '请选择岗位', trigger: 'change' }]
  }
})


const reQueryForm = () => { // 重置查询表单
  data.queryForm = {
    pageNum: 1,
    pageSize: 20
  }
}


const currentChange = (page) => {
  // 
  pageData.queryForm.pageNum = page
  getList()
}

const sizeChange = (size) => {
  data.queryForm.pageSize = size
  getList()
}

const add = () => {  // 新增

}

const edit = (row) => { // 编辑



}
const onChanSize = (e) => {
  //修改分页数
  // 
  data.queryForm.pageNum = 1;
  data.queryForm.pageSize = e;
  getList();
}
const onChanPage = (e) => {
  //修改分页
  // 
  data.queryForm.pageNum = e;
  getList();
}

const del = (row) => { // 删除
  ElMessageBox.confirm('确认删除?', '提示').then(() => {
    // $axios.post() / $axios.get() 

  })
}

let formRef = ref(null)

const submit = () => { // 提交新增/编辑表单
  formRef.value.validate(valid => {
    if (valid) {

    }
  })
}

const getList = () => { // 获取表格数据
  data.loading = true;

  data.loading = false;
}
let imgSrc = ref('');
onBeforeMount(() => {
  var userInfo = localStorage.getItem('info');
  if (userInfo) {
    data.userInfo = JSON.parse(userInfo);
    // data.isMerchantAdmin = data.userInfo.isMerchantAdmin;
  }
  ///getImg

  $.get($httpUrl + "/file/getImg", {}, function (obj) {
    imgSrc.value = obj;

  })












  layui.extend({
  }).use(['jquery', 'layer', 'form', 'table', 'upload', 'element'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    let upload = layui.upload;
    //保存
    form.on("submit(doSubmit)", function (obj) {
      layer.confirm('确定修改吗', function (index) {
        //序列化表单数据
        const params = $("#dataFrm").serialize();//吧datafrm化为json格式,吧from表单的所有数据转化为json
        $.post($httpUrl + "/user/editLogin", params, function (obj) {

          if (obj.code === 200) {
            layer.msg("修改成功！");

            var userInfo = localStorage.getItem('info');
            let temp = { ...JSON.parse(localStorage.getItem('info')), ...data.userInfo }
            localStorage.setItem('info', JSON.stringify(temp))

            // setTimeout(function(){//
            //     location.reload()//刷新页面
            // },1000)
          }

        })
      });
    })

    let op;
    $("#pwd").click(function () {
      op = layer.open({
        type: 1,
        title: "修改密码",
        area: ['500px', '300px'],
        content: $("#saveOrUpdateDiv") //这里content是一个普通的String
      });
    });
    //关闭窗口
    $("#guanbi").click(function () {
      //console.log(op);
      layer.close(op)
    })
    $("#qwe").click(function () {
      const loginname = $("#loginname").val();
      const pwd = $("#jpwd").val();
      const pwd1 = $("#pwd1").val();
      const pwd2 = $("#pwd2").val();
      const reg = new RegExp(/^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/);
      if (pwd === "" || loginname === "" || pwd1 === "") {
        layer.msg("不能为空")
        return false;
      } else if (pwd1 !== pwd2) {
        layer.msg("密码不一致")
        return false;
      } else if (!reg.test(pwd1) && false) {
        layer.msg("密码必须8-18位,由字母、数字组成，区分大小写")
        return false;
      } else {
        $.post($httpUrl + "/user/editPwd", { loginname: loginname, pwd: pwd, pwd1: pwd1 }, function (res) {
          if (res.code === 200) {
            setTimeout(function () {
              window.parent.location.href = "../sel/toLogin";//#设定跳转的链接地址
            }, 3000)
            layer.msg("修改成功", {
              time: 3000 //取消自动关闭
            });  // 显示倒计时
            //layer.close(op);
            return false;
          } else {
            layer.msg(res.msg);
            return false;
          }
        })
      }

    })

    //常规使用 - 普通图片上传
    const uploadInst = upload.render({
      elem: '#test1'
      , url: $httpUrl + '/file/uploadImg' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
      , before: function (obj) {
        //预读本地文件示例，不支持ie8
        obj.preview(function (index, file, result) {
          $('#demo1').attr('src', result); //图片链接（base64）
        });
      }
      , done: function (res) {
        //如果上传失败
        if (res.code !== 200) {
          return layer.msg('上传失败');
        } else {
          return layer.msg('上传成功');
        }

        $('#demoText').html(''); //置空上传失败的状态
      }
    });
  });
});

</script>

<style scoped>
.layui-upload-img {

  margin: auto;
}
</style>